<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { useRoute } from 'vue-router'
import { getDetailData } from '@/api/detail'
import { showImagePreview } from 'vant'
const route = useRoute()

// 通过 url 拼接的参数可以使用 route.params 这个方式进行获取
// console.log(route.params);


// 通过 query 传递的参数可以通过 route.query 进行获取
// console.log(route.query);

interface iPro {
  banners: string[]
  brand: string
  category: string
  desc: string
  discount: number
  originprice: number
  proid: string
  proname: string
}
let state: iPro = reactive({
  banners: [],
  brand: '',
  category: '',
  desc: '',
  discount: 0,
  originprice: 0,
  proid: '',
  proname: ''
})

// 请求获取详情页面的具体数据然后进行展示
getDetailData({ proid: String(route.query.proid) }).then(res => {
  console.log(res.data.data);
  const data = res.data.data

  state.banners = data.banners[0].split(',')
  state.brand = data.brand
  state.category = data.category
  state.desc = data.desc
  state.discount = data.discount
  state.originprice = data.originprice
  state.proid = data.proid
  state.proname = data.proname

})

// 点击显示遮罩层的 show
const show = ref(false)

// ----------------- 图片预览 ----------------
// 记录当前轮播图和图片预览在哪张图片上
const currentCount = ref(0)
function showImage() {
  showImagePreview({
    images: state.banners,
    startPosition: currentCount.value,
    onChange(index: number) {
      currentCount.value = index
    }
  });
}
// 当轮播图切换时会调用该方法
function onChange(index: number) {
  // console.log(index);
  currentCount.value = index
}

// 打开在线客服的按钮
function showMsg() {
  // 打开聊天窗口
  // 直接 window. 使用
  window._MEIQIA('showPanel');

  // 传递顾客信息
  window._MEIQIA('metadata', {
    address: '北京天安门', // 地址
    age: '80', // 年龄
    comment: '我是一个帅哥', // 备注
    email: '337409100@qq.com', // 邮箱
    gender: '女', // 性别
    name: '老吴', // 名字
    qq: '333740100', // QQ
    tel: '15060002022', // 电话
    weibo: 'qqqqqqqq.com', // 微博
    weixin: 'qwwqeqweqe.wx', // 微信
    contact: 'xxxxxx', // 联系人
  });

}
</script>
<template>
  <div class="box">
    <header class="header">
      <span class="back" @click="$router.back()">
        <van-icon name="arrow-left" size="24" />
      </span>
      详情
    </header>
    <div class="content">
      <div class="my-detail-swipe">
        <!-- 轮播图布局 -->
        <van-swipe @click="showImage" :initial-swipe="currentCount" @change="onChange" class="my-swipe" :autoplay="3000"
          indicator-color="white">
          <van-swipe-item v-for="item in state.banners" :key="item">
            <img :src="item" alt="">
          </van-swipe-item>
        </van-swipe>

        <!-- 商品播放的按钮 -->
        <div class="video-btn" @click="show = true">
          <van-icon name="play-circle" size="25" color="#f66" />
        </div>
      </div>

      <main>
        <h5>{{ state.proname }}</h5>
        <p>{{ state.brand }}</p>
        <p>{{ state.category }}</p>
        <p>{{ state.discount }}</p>
        <p>{{ state.originprice }}</p>
        <p>{{ state.proid }}</p>
        <p class="desc">{{ state.desc }}</p>
      </main>
    </div>

    <!-- 遮罩层 -->
    <van-overlay :show="show" @click="show = false">
      <video class="my-video" autoplay controls
        src="https://jvod.300hu.com/vod/product/795dcca9-6455-4a54-8a2b-1ba31a2c502c/9e527c4cfae144249add51045967b788.mp4"></video>
    </van-overlay>

    <!-- 功能组件 -->
    <van-action-bar>
      <van-action-bar-icon icon="chat-o" @click="showMsg" text="客服" dot />
      <van-action-bar-icon icon="cart-o" text="购物车" badge="5" />
      <van-action-bar-icon icon="shop-o" text="店铺" badge="12" />
      <van-action-bar-button type="warning" text="加入购物车" />
      <van-action-bar-button type="danger" text="立即购买" />
    </van-action-bar>

  </div>

  <!-- route  router -->
</template>
<style lang="scss" scoped>
.back {
  float: left;
  line-height: 44px;
}

.back .van-icon {
  line-height: 44px;
}


.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 350px;
  height: 350px;
  text-align: center;
  background-color: #39a9ed;
}

.van-swipe-item img {
  width: 100%;
  height: 100%;
}

main {
  padding: 0 20px;
  font-size: 14px;
  height: 2000px;
}

.desc {
  line-height: 26px;
}

.my-detail-swipe {
  position: relative;
}

.video-btn {
  position: absolute;
  left: 50%;
  bottom: 20px;
  width: 40px;
  height: 25px;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 13px;
  transform: translateX(-50%);
}

.my-video {
  position: fixed;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
}
</style>
